.notification-container {
    margin: auto;
    max-width: 480px;
    > .panel {
        position: relative;
        .notification-header {
            display: block;
            text-decoration: none;
            position: absolute;
            top: 50%;
            left: -20px;
            transform: translateY(-50%);
            .notification-header-icon {
                font-size: 18px;
                color: #fff;
                text-align: center;
                padding: 10px;
                width: 45px;
                border-radius: 100%;
                &:before {
                    content: "\f0f3";
                    font-family: 'FontAwesome';
                }
            }
        }
        .notification-top-label {
            position: absolute;
            padding: 3px 8px;
            color: #fff;
            right: 0;
            border-top-right-radius: 2px;
            border-bottom-left-radius: 4px
        }
        .panel-body {
            padding-left: 40px;
            .notification-sub {
                color: #aaaaaa;
            }
        }
        &:hover {
            box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
            .notification-header {
                .notification-header-icon {
                    box-shadow: -3px 0 5px -1px rgba(0, 0, 0, 0.2), -6px 0 10px 0 rgba(0, 0, 0, 0.14);
                    &:before {
                        content: "\f1f8";
                    }
                }
            }
            .notification-top-label {
                box-shadow: 2px -1px 5px 0 rgba(0, 0, 0, 0.14);
            }
        }
        &.marked{
            -webkit-animation: notification-marked .5s linear;
            animation: notification-marked .5s linear;
            opacity: 0;
        }
    }
}

@keyframes notification-marked {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(100px);
    }
}